<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>登录</title>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<!--		引用Material Icons字体，允许在网页中使用遵循Material Design风格的图标。-->
	<link rel="stylesheet" href="https://kauizhaotan.oss-cn-shanghai.aliyuncs.com/VotingSystem/css/materialize.min.css"type="text/css">
	<!--		引用Materialize CSS框架，为网页提供Material Design风格的样式和布局。-->
	<link rel="stylesheet" href="/css/me.css" type="text/css">
	<!--		引用自定义的CSS文件“me.css”，用于定义网页的特定样式。-->
	<script type="text/javascript" src="https://kauizhaotan.oss-cn-shanghai.aliyuncs.com/VotingSystem/js/jquery.js" charset="UTF-8"></script>
	<!--		引用jQuery库，用于简化HTML文档操作、事件处理、动画效果和Ajax交互。-->
	<script type="text/javascript" src="https://kauizhaotan.oss-cn-shanghai.aliyuncs.com/VotingSystem/js/materialize.min.js" charset="UTF-8"></script>
	<!--		引用Materialize的JavaScript文件，提供Material Design风格的动态效果和组件功能。-->

</head>
<body class="bg">
<div th:replace="common :: navbar(2)"></div>

<!--主体开始-->
<div class="container login-container" style="flex: 1 0 auto; width: 90%">
	<!--开始-->
	<div class="row section  ">
		<div class="col s12 l12" style="margin-top: 150px">
			<div class="card horizontal large" style="height: 600px; background-color: rgba(255,255,255,0.5)" >
				<div class="card-image">
					<img width="600" height="500" src="https://cdn.pixabay.com/photo/2023/11/18/16/04/login-8396701_1280.jpg" class="responsive-img wp-post-image" loading="lazy" sizes="(max-width: 305px) 100vw, 305px">
					
<!--					<img width="600" height="500" th:src="${imageProxy} + 'https://picsum.photos/seed/600/500?blur=5' " class="responsive-img wp-post-image" loading="lazy"  sizes="(max-width: 305px) 100vw, 305px">-->
			
					<div class="card-title">
<!--						<div class="title-text">简约投票系统</div>-->
					</div>
				
				</div>
				<div class="card-stacked">
					<div class="card-content center">
						<div class="section">
							<div class="col s12 l12">
								<div class="row section">
									<h3 class="title left-align " style="font-weight: 900"><span class="red-text">·&nbsp;</span>登录</h3>
								</div>
								<form method="post" action="/login" th:id="login-form" class="horizontal section">
									<div class="row">
										<div class="input-field col s12">
											<i class="material-icons prefix">account_circle</i>
											<input id="username" type="text"  class="validate" name="username" value="">
											<label for="username">账号</label>
										</div>
									</div>
									<div class="row">
										<div class="input-field col s12">
											<i class="material-icons prefix">vpn_key</i>
											<input id="password" type="password"  class="validate" name="password" value="">
											<label for="password">密码</label>
										</div>
									</div>
									<div class="section row">
										<div class="center-align">
											<input name="_csrf" type="hidden" value="93edbebc-aa90-4b8c-b372-28f922a9a9e6"/>
											<button class="btn-large waves-effect waves-light pulse" type="submit" name="action">登录
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--结束-->


</div>
<!--主体结束-->

<div th:replace="common::footer"></div>

<script th:inline="javascript">
    let message =[[${param?.error}]]
    if(message != null){
        M.toast({
            html: "用户名或密码错误，请重新输入!",
            classes: 'rounded red',
        });
    }
</script>

</body>
</html>